import React,{Component} from "react";
// 格式化事件组件
import moment from "moment";
// 导入封装的axios
import axios from "@/services/http.js"
// 导入样式
import "@/assets/css/Chat.css";
// 引入文件上传组件
import UploadImg from "@/components/UploadImg.jsx";
// 引入antd
import { Input ,message } from 'antd';
const { TextArea } = Input;
class Chat extends Component{
	constructor(props){
		super(props);
		// 数据库
		this.state={
			// 只接收每一次的地址（获取地址使用）
			imgUrlList:[],
			// 存储远程数据（展示信息）
			showList:[],
		};
		
	}
	render(){
		return(
			<div className="ChatMain">
			{/*二级容器*/}
				<div className="Heart">
				{/*导航*/}
					<div className="ChatNav">
						{/*导航logo*/}
						<div className="logo">
							<img src="https://bbs.cf.qq.com/static/image/ossweb-img/logo.png" alt="logo"/>
						</div>
						{/*导航选项*/}
						<div className="select">
							<ul className="navList">
								<li title="首页" onClick={(e)=>this.toHome(e)}>
									<dl>
										<dt>首页</dt>
										<dd>Home</dd>
									</dl>
								</li>
								<li title="论坛" onClick={(e)=>this.toChat(e)}>
									<dl>
										<dt>论坛</dt>
										<dd>Chat</dd>
									</dl>
								</li>
								<li title="商城" onClick={(e)=>this.toShopping(e)}>
									<dl>
										<dt>商城</dt>
										<dd>Shopping</dd>
									</dl>
								</li>
								<li title="登录" onClick={(e)=>this.toLogin(e)}>
									<dl>
										<dt className="loginSearch">(未登录)</dt>
										<dd>Login</dd>
									</dl>
								</li>
								<li  className="loginCancel" onClick={(e)=>this.Cancel(e)}>
									<dl>
										<dt>注销</dt>
										<dd>Cancel</dd>
									</dl>
								</li>
							</ul>
						</div>
					</div>
						{/*论坛内容*/}
					<div className="content">
						{/*写动态区域*/}
						<div className="write">
							{/*文本输入区域*/}
							<div className="textWrite">
								<TextArea
								          onChange={this.onChange}
								          placeholder="发表动态!"
								          autoSize={{ minRows: 3, maxRows:3 }}
										  bordered={false}
										  showCount={true}
								/>
							</div>
							{/*图片上传区域*/}
							<div className="imgUpload">
								{/*给图片上传组件传一个函数去获取子组件值*/}
								<UploadImg fun={(e)=>this.getImgList(e)}  send={(e)=>this.sendData(e)} onClick={(e)=>this.uploadButton(e)}></UploadImg>
							</div>
							{/*发表按钮*/}
							<div className="pushButton">
								<span onClick={(e)=>this.getText(e)}>发表</span>
							</div>
						</div>
						{/*动态展示区域*/}
						<div className="showcontent" onClick={(e)=>this.bigImg(e)}>
						
							{
							          this.state.showList.map(item => {
							            return (
											<div className="forCopy" key={item.id}>
												<div>{item.niName}<em>{item.time}</em></div>
												<div>{item.desc}</div>
												<div><img src={item.img} alt="图片"/></div>
											</div>
										)
							          })
							}
							<div className="bigImg">
								<span className="bigImgExit" onClick={(e)=>this.bigExit(e)}>+</span>
								<img src="" className="bigImgimg" alt="图片"/>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	};
	// 方法区域
	
		// 跳转首页
		toHome=()=>{
			this.props.history.push("/home");
		}
		// 跳转登录
		toLogin=()=>{
			if(localStorage.getItem("token")){
				message.warn("已有帐号登录！请先注销！")
			}else{
				this.props.history.push("/login");
			}
		}
		// 跳转社区
		toChat=()=>{
			this.props.history.push("/chat");
			document.location.reload();
		}
		// 跳转商城
		toShopping=()=>{
			this.props.history.push("/shopping");
			document.location.reload();
		}
		// 退出登录
		Cancel=()=>{
			// 如果有token
			if(localStorage.getItem("token")){
				// 删除token username
				localStorage.removeItem('token');
				localStorage.removeItem('username');
				// 重新加载本页面
				document.location.reload();
			}
		}
		
		// 展示区图片放大
		bigImg=(e)=>{
			const imgurl =e.target.src;
			if(e.target.tagName==="IMG"){
				// 获取展示放大框对象
				let bigImg = document.querySelector(".bigImg");
				// 获取img对象
				let bigImgimg = document.querySelector(".bigImgimg");
				// 赋值
				bigImg.style.display="block";
				bigImgimg.src=imgurl;
			}
		}
		// 展示区图片放大退出
		bigExit=(e)=>{
			// 获取展示放大框对象
			let bigImg = document.querySelector(".bigImg");
			bigImg.style.display="none";
		}
		
		uploadButton=(e)=>{
			console.log(e.target)
		}
		
		// 获取文本框值
		getText=()=>{
			let textValue=document.querySelector("TextArea")
			// 定时器，解决数据延迟问题
			setTimeout(()=>{
				console.log(this.state.active)
			},10)
			
			if(textValue.value){
				// 创建一个组件，加入到容器最后
				var newChat=document.createElement('div');
				//给这个新的div添加show-content类,转化样式
				newChat.className="forCopy";
				
				//将要素拼接进去
				
				// 判断必须有文字，可以没图
				if(this.state.imgUrlList[0]){
					newChat.innerHTML=`
					<div>${localStorage.getItem("username")} :<em> ${moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}</em></div>
					<div>${textValue.value}</div>
					<div><img src="${this.state.imgUrlList[0]}" alt="suixian"/></div> 
					`;
				}else{
					newChat.innerHTML=`
					<div>${localStorage.getItem("username")} :<em> ${moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}</em></div>
					<div>${textValue.value}</div>
					`;
				}
				
				// 找到添加父元素
				let fatherContent = document.querySelector('.showcontent');
				//把新的节点插到父元素最前面
				 fatherContent.insertBefore(newChat, fatherContent.children[0]);
				//  // 到最底部
				//  let rongqi = document.querySelector('.content')
				// rongqi.scrollTo(0, rongqi.scrollHeight)
				// 成功提示
				message.success("添加成功！")
			}else{
				message.error("内容不能为空！")
			}
		}
	// 生命周期函数
	componentDidMount(){
		
		// 判断是否有token
		if(!localStorage.getItem("token")){
			// 去登陆
			this.props.history.push("/login");
		}
		
		// 查看是否已经登录
		if(localStorage.getItem("token")){
			// 修改登录按钮状态
			document.querySelector(".loginSearch").innerHTML="(已登陆)";
			document.querySelector(".loginSearch").style.color="green";
			
		}else{
			document.querySelector(".loginSearch").innerHTML="(未登陆)";
			document.querySelector(".loginSearch").style.color="red";
		}
		// 注销按钮状态
		if(localStorage.getItem("token")){
			// 修改注销按钮状态
			document.querySelector(".loginCancel").style.color="rgba(255,255,255)";
			
		}else{
			document.querySelector(".loginCancel").style.color="rgba(255,255,255,.5)";
		}
		
		// 改变文字颜色（文本框）
		document.querySelector("TextArea").style.color="white";
		
		// 改变上传图标的文字
		let uploadText = document.querySelectorAll(".ant-upload");
		// 修改上传框样式
		uploadText[0].style.background="rgba(255,255,255,.0)";
		uploadText[1].style.color="rgba(255,255,255,.3)";
		// 修改文字
		uploadText[1].childNodes[1].data="+上传图片";
		
		
		// 请求展示数据
		axios.post("https://www.fastmock.site/mock/49db6bc2e47e172f28ec03877c5263d6/CF_api/chat/show").then(ret=>{
			//展示数据存储
			this.setState({
				showList:ret.data.showInfo,
			})
		})
	};
	
		
		// 获取图片地址并赋值(父获取子的值)
		getImgList=(list)=>{
			// 函数会被调用三次两次不同赋值,但是每两个是同一个图片地址
			// 定义一个空数组
			let preList=[]
			// 判断,为了解决返回值报错
			if(list.length===0){
			}else{
				// 循环返回值,获取图片base64地址
				for(let i=0;i<list.length;i++){
					if(preList.indexOf(list[i].thumbUrl)===-1){
						preList.push(list[i].thumbUrl)
					}}}
			// 将新数组循环,去掉重复地址
			for(let j=0;j<preList.length;j+=2){
				// 赋值给state中的数组
				this.setState({
					imgUrlList:preList,
				})
			}	
		}
}

export default Chat;

